<template>
  <el-affix offset="0">
    <div class="top" >
      <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
      >
        <el-menu-item index="0">
          <img
              style="width: 50px"
              src="../assets/logo.png"
              alt="Element logo"
          />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="/introduction">学车首页</el-menu-item>
        <el-menu-item index="/introduceCoach">金牌教练</el-menu-item>
        <el-menu-item index="/trainPlace">场地详情</el-menu-item>
        <el-menu-item index="/login">加入我们</el-menu-item>
      </el-menu>
    </div >
  </el-affix>
  <el-affix class="select" offset="100">
    <el-card>
      <el-container>
        <el-header>
          <el-input v-model="search" placeholder="搜索您想要学车的位置" />
        </el-header>
        <el-main>
          <el-form :inline="true" :model="form">
            <el-form-item label="城市">
              <el-select v-model="form.city" placeholder="请选择城市" style="width: 80px">
                <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区域">
              <el-select v-model="form.district" placeholder="请选择区域"  style="width: 80px">
                <el-option
                    v-for="item in districts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-table :data="tableData">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-card>

  </el-affix>
  <div class="trainmap">
    <baidu-map
    style="width: 100%;height: 600px;margin: 0 auto;"
    :zoom="14"
    center="重庆" :scroll-wheel-zoom="true">
      <bm-marker :position="{lat: 29.562713495946262,lng: 106.56594668435409}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.564221432081464,lng: 106.57284567066844}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.579802106958418,lng: 106.57112092408985}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.54034310635394,lng: 106.58750601658643}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.547884246053492,lng: 106.5205283577846}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.54034310635394,lng: 106.59612974947937}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.537326491346473,lng: 106.54841176080511}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.581812339690387,lng: 106.57198329737915}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.573771166100425,lng: 106.50989242054997}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>
      <bm-marker :position="{lat: 29.5687451040266,lng: 106.49753173673676}" animation="BMAP_ANIMATION_BOUNCE">
        <bm-info-window :show="show">{{this.points}}</bm-info-window>
      </bm-marker>

    </baidu-map>
  </div>



</template>

<script>
import {ref} from "vue";

export default {
  name: "TrainPlace",
  data(){
    return{
      points:ref(''),
      show:false,
      search: '',
      form: {
        city: '',
        district: ''
      },
      cities: [
        { value: '重庆市', label: '重庆市' }
      ],
      districts: [
        { value: '全城', label: '全城' }
      ],
      tableData: [
        { name: '易学车三亚湾训练场', address: '重庆市渝北区三亚湾-地铁站' },
        { name: '易学车南坪训练场', address: '重庆市南岸区捷信驾校南坪训练场' },
        { name: '易学车陈家桥铁站训练场', address: '重庆市沙坪坝区重庆建筑科技职业学院-南门' },
        { name: '易学车空港训练场', address: '重庆市渝北区观月路-地铁站' }
      ]
    }
  },
  methods:{
    println(e){
    }
  }
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 10vh;
}
.flex-grow{
  flex-grow: 1;
}
.trainmap{
  width: 100%;
  height: 80vh;
}
.select{
  z-index: 99;
  width: 30%;
  height: 0;
}
.el-header {
  background-color: #f5f5f5;
  padding: 10px;
}

.el-main {
  padding: 20px;
}
</style>